<template>
  <a-drawer
    :width="730"
    closable
    placement="right"
    :visible="visible"
    @close="visible=false"
  >

    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000;font-weight: bold;">成员详情</div>
      <div style="font-size: 12px;margin-left: 20px;color: #333333;">班组名称：{{ row_record.teamName }}</div>
      <div style="font-size: 12px;margin-left: 30px;color: #333333;">组长姓名：{{ row_record.teamLeader }}</div>
    </div>
    <a-spin :spinning="spinning">
      <a-popover :visible="popoverVisible" @visibleChange="visibleChange" autoAdjustOverflow trigger="click" placement="bottomLeft">
        <template slot="title"><span>勾选成员</span></template>
        <template slot="content">
          <div style="height: 720px;" class="g-flex g-x-between">
            <!--左边-->
            <div class="content-left">
              <a-row >
                <a-col :span="15">
                  <!--搜索框--弹窗-->
                  <a-input
                    @keyup.enter="searchMember"
                    :maxLength="11"
                    style="width: 100%;margin-bottom: 10px;"
                    placeholder="请输入姓名"
                    v-model="search_value">
                  </a-input>
                </a-col>
                <a-col :span="5">
                  <a-button type="primary" style="width: 100%;" @click="searchMember" icon="search">搜索</a-button>
                </a-col>
              </a-row>
              <!--成员列表--弹窗-->
              <a-table
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnWidth:40 }"
                size="small"
                :columns="memberColumns"
                :data-source="menberTableList"
                :pagination="member_pagination"
                @change="handleMemberTableChange"
                :rowKey="(record,index)=> record.memberId"
              >
                <!--序号-->
                <template slot="index" slot-scope="text, record, index">
                  <span>{{ (member_pagination.current - 1) * member_pagination.pageSize + (index + 1) }}</span>
                </template>
                <!--              &lt;!&ndash;成员ID&ndash;&gt;-->
                <!--              <template slot="memberId" slot-scope="text">-->
                <!--                <a-tooltip >-->
                <!--                  <template slot="title">{{ text }}</template>-->
                <!--                  <span > {{ text }}</span>-->
                <!--                </a-tooltip>-->
                <!--              </template>-->
                <!--状态-->
                <template slot="status" slot-scope="text">
                  <span v-if="text==0">在职</span>
                  <span v-else-if="text==1" >离职</span>
                  <span v-else-if="text==2">冻结</span>
                  <span v-else>{{ text }}</span>
                </template>
              </a-table>
            </div>
            <a-button icon="arrow-right" @click="toRight" :disabled="selectedRowKeys.length==0" type="primary" size="small" style="margin: 0 10px;align-self: center" />
            <!--右边-->
            <div class="content-right">
              <div class="title" >已选择成员：{{ filterData.length ?filterData.length:0}}</div>
              <div class="content">
                <div v-for="(item,index) in filterData" :key="item.tbNetTeamMemberId" class="g-flex g-y-center g-x-between" style="margin-top: 3px;" >
                  <div><span style="margin-right: 5px;">{{index+1}}</span> {{item.memberName}}</div>
                  <a-button @click="closeMember(item)" icon="close" type="link" size="small"  />
                </div>
              </div>
            </div>
            <a-button type="primary" style="position: absolute;bottom: 10px;right: 0px;" @click="submit" :disabled="filterData.length==0">确定</a-button>
          </div>
        </template>
        <a-button type="primary" icon="plus-circle" style="margin: -20px 0 10px;" >新增成员</a-button>
      </a-popover>
      <a-table
        size="small"
        :columns="columns"
        :data-source="tableList"
        :pagination="pagination"
        :rowKey="(record,index)=> index"
        @change="handleTableChange"
      >
        <!--序号-->
        <template slot="index" slot-scope="text, record, index">
          <span>{{ (pagination.current - 1) * pagination.pageSize + (index + 1) }}</span>
        </template>
        <!--操作-->
        <template slot="action" slot-scope="text,record">
          <a-popconfirm title="确定删除吗?" @confirm="() =>clickDeleteMember(record)">
            <a  >删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </a-spin>

  </a-drawer>
</template>

<script>
import { getNetTeamMemberList, FindNetTeamMemberAll, DeleteTeamMember ,AddTeamMember} from '@/api/bd/team'
export default {
  props:{
    row_record:{
      type:Object,
      default:()=>{}
    }
  },
  data () {
    return {
      search_value:'',
      selectedRowKeys: [],
      filterData:[],
      tableList:[],
      menberTableList:[],
      originMenberTableList:[],
      visible:false,
      popoverVisible:false,
      spinning:false,
      form: this.$form.createForm(this),
      pagination: {
        current: 1, //当前页
        pageSize: 15, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      member_pagination: {
        current: 1, //当前页
        pageSize: 15, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `${total}条`, //分页中显示总的数据
      },
      columns: [
        { title: '序号', scopedSlots: { customRender: 'index' } },
        { title: '成员ID', dataIndex: 'memberId', ellipsis: true },
        { title: '成员名称', dataIndex: 'memberName', ellipsis: true},
        { title: '是否禁用', dataIndex: 'isDisabled', ellipsis: true },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, width: 100, },

      ],
      memberColumns: [
        { title: '序号', scopedSlots: { customRender: 'index' },width:40 },
        // { title: 'ID', dataIndex: 'memberId', scopedSlots: { customRender: 'memberId' },ellipsis: true ,width:40},
        { title: '姓名', dataIndex: 'memberName', ellipsis: true,width:50},
        { title: '岗位', dataIndex: 'tdyName', ellipsis: true,width:85 },
        { title: '部门', dataIndex: 'tdName', ellipsis: true ,width:85},
        { title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender:'status'},
          ellipsis: true,
          width:40},
      ],
    }
  },
  methods: {
    show () {
      this.visible = true
      this.form.resetFields()
      this.$nextTick(()=>{
        this.getList()
      })
    },
    getList(){
      const teamId=this.row_record.teamId
      this.spinning=true
      getNetTeamMemberList({teamId}).then(res=>{
        this.tableList=res.rows
        this.spinning=false
        this.getAllTeamMenber()
      })
    },
    getAllTeamMenber(){
      const memberIdLists = []
      this.tableList.forEach(item=>{
        memberIdLists.push(item.memberId)
      })
      const params={
        memberIdLists:memberIdLists
      }
      FindNetTeamMemberAll(params).then(res=>{
        this.menberTableList=res.rows
        this.originMenberTableList=res.rows
        console.log('所有成员列表',res)
      })
    },

    /**
     * 提交添加成员
     * **/
    submit(){
      const memberIdList=[]
      this.filterData.forEach(item=>{
        memberIdList.push(item.memberId)
      })
      const params={
        memberIdList,
        teamId:this.row_record.teamId
      }
      AddTeamMember(params).then(res=>{
        if(res.code == 200){
          this.$message.success(res.message)
          this.popoverVisible=false
          this.getList()
        }else{
          this.$message.info(res.message)
        }
      })
    },
    /**
     * 删除成员
     * **/
    closeMember(target){
      const selectedRowKeys = this.selectedRowKeys.filter(item=>{
        return item != target.memberId
      })
      this.selectedRowKeys= selectedRowKeys

      const filterData = this.filterData.filter(item=>{
        return item.memberId != target.memberId
      })
      this.filterData = filterData
    },
    /**
     * 查找成员
     * **/
    searchMember(){
      if(!this.search_value||this.search_value==''){
        this.menberTableList=this.originMenberTableList
        return
      }
      const filterTable = this.originMenberTableList.filter(item=>{
        return item.memberName.indexOf(this.search_value)>-1
      })
      this.menberTableList = filterTable
    },
    /**
     * 勾选成员
     * **/
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    /**
     * 选择至右边
     * **/
    toRight(){
      let selectedRowKeys = []
      this.filterData.forEach(item=> selectedRowKeys.push(item.memberId))
      const concatData = selectedRowKeys.concat(this.selectedRowKeys)
      selectedRowKeys = [...new Set(concatData)]
      this.filterData = this.originMenberTableList.filter((item)=> selectedRowKeys.includes(item.memberId))
    },
    /**
     * 删除成员
     * **/
    clickDeleteMember(record){
      const params={
        tbNetTeamMemberId:record.tbNetTeamMemberId,
        teamId:record.teamId
      }
      DeleteTeamMember(params).then(res=>{
        if(res.code==200){
          this.$message.success(res.message)
          this.getList()
        }else{
          this.$message.info(res.message)
        }
      })
    },
    /**
     * 控制显示预存款气泡卡片
     * */
    visibleChange(visible){
      this.popoverVisible=visible
      this.$nextTick(()=>{
        this.selectedRowKeys=[]
        this.filterData=[]
      })
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
    },
    handleMemberTableChange(pagination) {
      this.member_pagination.current = pagination.current
      this.member_pagination.pageSize = pagination.pageSize
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-drawer-body{
  padding: 12px;
}
/deep/ .ant-table-small > .ant-table-content > .ant-table-body{
  margin: 0;
}
.content-left{
  height: 100%;
  width: 450px;
  padding: 7px;
  //border-right: 1px solid #e8e8e8;
  border: 1px solid #e8e8e8;
}
.content-right{
  position: relative;
  height: 94%;
  width: 180px;
  padding: 10px;
  border: 1px solid #e8e8e8;
  .title{
    margin-top: 5px;
    text-align: center;
    border-bottom: 1px #e8e8e8 solid;
    padding-bottom:13px;
  }
  .content{
    overflow-y: auto;
    height: 95%;
  }
  p{
   margin-left: 5px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
}
</style>

